<template>
  <div>
    <search-form
      :search-config="searchData"
      :label-width="150"
      @clear="clearSearch"
      @visible-change="resetTableHeight"
      @search="handleSearch"
    />
    <table-box
      ref="refTable"
      table-size="mini"
      :table-config="tableConfig"
      show-selection
      dragable
      :selected-arry.sync="tableSelected"
      :other-filters="otherFilters"
      @btnOperate="btnOperate"
      @selection-change="selectionChangeHandle"
    />
    <export-files v-if="exportVisible" title="定制产品报图系列导出" :config="exportConfig" :visible.sync="exportVisible" @success="handleExportSuccess" />

  </div>
</template>
<script>
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'CustomizedIndex',
  components: { },
  data() {
    return {
      exportVisible: false,
      otherFilters: [],
      tableSelected: [],
      constTypeOptions: [],
      decorationRangeOptions: [],
      decorationFormOptions: [],
      applyBizTypeOptions: [],
      searchData: [
        { label: '门店建设项目号', prop: 'constCode', type: 'text', value: '', placeholder: '', filter: true },
        { label: '首次设计申请时间', prop: 'firstApplyDate', type: 'date', value: '', placeholder: '', filter: true }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopDesign/queryShopDesignReport`,
        hideSearchBar: true,
        pageSize: 10,
        // sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'constCode',
            label: '门店建设项目号',
            minWidth: 160
          },
          { prop: 'firstApplyDate',
            label: '首次设计申请时间',
            minWidth: 140
          },
          { prop: 'areaName',
            label: '所属区域',
            minWidth: 130
          },
          { prop: 'actualReportArea',
            label: '报图面积',
            minWidth: 130
          },
          { prop: 'seriesName',
            label: '系列名称',
            minWidth: 130
          },
          { prop: 'cabinetColorName',
            label: '柜体名称',
            minWidth: 130
          },
          { prop: 'doorColorName',
            label: '门板颜色',
            minWidth: 130
          },
          {
            prop: 'sampleFunctionSpace',
            label: '实际上样空间',
            minWidth: '130',
            render: (creat, row) => {
              if (!row.sampleFunctionSpace || !this.applySampleSpaceOptions) {
                return
              }
              let list = []
              if (typeof (row.sampleFunctionSpace) === 'string') {
                list = row.sampleFunctionSpace.split(',')
              } else {
                list = row.sampleFunctionSpace
              }
              const arr = []
              this.applySampleSpaceOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          }
        ],
        btnList: [
          {
            buttonName: '定制报图导出',
            outerFlag: true,
            optCode: 'customizedExport'
          }
        ]
      }
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '定制产品报图',
        dataApi: '/slm-admin/api/v1/shopDesign/exportPicReportSeries',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        headers: { 'Permission-perCode': 'shopdesign' },
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }]
    }
  },
  watch: {},
  async created() {
    const { SAMPLE_FUNCTION_SPACE } = await getDictByPatchType(['SAMPLE_FUNCTION_SPACE'])
    this.applySampleSpaceOptions = SAMPLE_FUNCTION_SPACE
  },
  methods: {
    btnOperate(flag) {
      switch (flag) {
        case 'customizedExport':
          this.exportVisible = true
          break
        default:
          break
      }
    },
    resetTableHeight() {
      this.$refs.refTable.setTableHeight()
    },
    // 清空搜索条件
    clearSearch(data) {
      this.otherFilters = []
    },
    // 获取搜索条件
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    },
    // 导出成功
    handleExportSuccess() {
      this.$message.success('导出成功！')
    }
  }
}
</script>
